<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="app">
    <!-- 背景 -->
    <div class="background"></div>
    <!-- 游戏说明页面 -->
    <div class="gameStart">
      <img src="./logo/logo-01.png" alt="">
      <h1>How to Play Star Battle.</h1>
      <div class="title_cont">
        <p> Move the spaceship using the sensible areas in the screen;</p>
        <p> The timer present the time lapsed;</p>
        <p> The fuel counter show the remain fuel;</p>
        <p> During the flight, the spaceship needs to destroy the asteroids and enemy spaceships that are presented in
          the
          space;</p>
        <p> You can shoot pressing Space Bar;</p>
        <p> If the spaceship hits a asteroid or another spaceship, you lose 15 points of fuel;</p>
        <p> Enemy spaceship needs 1 shot to be destroyed, you will get 5 points for each enemy destroyed;</p>
        <p> Asteroid needs 2 shots to be destroyed, you will get 10 points for each asteroid destroyed;</p>
        <p> If you destroy a friendly spaceship, you lose 10 points;</p>
        <p> During the flight, the spaceship needs to collect fuel in the space;</p>
        <p> You can pause the game clicking in a button pause, or pressing the letter "p";</p>
        <p> Go beyond all limits;</p>
      </div>
      <h2>Battle in Space with Star Battle Championship...</h2>
      <!-- 开始按钮 -->
      <button class="start">Start Game</button>
    </div>
    <!-- 排行榜 -->
    <div class="ranking">
      <h2>排行榜</h2>
      <table>
        <thead>
          <tr>
            <th>pisition</th>
            <th>name</th>
            <th>score</th>
            <th>time</th>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr>
            <td>1</td>
            <td>EASY</td>
            <td>JOHN DOE</td>
            <td>1:00</td>
          </tr>
        </tbody>
      </table>
      <button class="restart">Restart the game</button>
    </div>
    <!-- 信息表 -->
    <div class="infoTable">
      <div class="tableName">
        用户名：<input type="text" class="userName" placeholder="请输入用户名">
      </div>
      <button class="submit">submit</button>
    </div>
    <!-- 飞机模型 -->
    <div class="aircraft_cont">
      <div class="aircraft">
        <img src="./images/纸飞机.png" class="plane" alt="">
        <div class="flame"></div>
        <div class="flame"></div>
      </div>
    </div>
    <!-- 我方子弹 -->
    <div class="laynch">
      <!-- <div class="laynch_item"></div> -->
    </div>
    <!-- 敌方子弹 -->
    <div class="enemy_bullet">
      <!-- <div class="bullet_item"></div> -->
    </div>
    <!-- 游戏控制器 -->
    <div class="controller_box">
      <div class="controller">
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="top" alt="">
        </div>
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="right" alt="">
        </div>
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="left" alt="">
        </div>
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="bottom" alt="">
        </div>
      </div>
    </div>
    <!-- 游戏信息 -->
    <div class="gameInfo">
      <!-- 游戏时间 -->
      <div class="time_cont">
        <img src="./images/time.png" alt="">
        <div class="time">0秒</div>
      </div>
      <!-- 燃油计数器 -->
      <div class="fuelCounter_cont">
        <span class="fuelFont">燃料：</span>
        <div class="fuelCounter">
          <div class="progress"></div>
          <span>15</span>
        </div>
      </div>
      <!-- 分数 -->
      <div class="score_cont">
        <img src="./images/分数.png" alt="">:
        <div class="score">0分</div>
      </div>
      <!-- 暂停 -->
      <div class="suspend">
        <!-- 暂停游戏 -->
        <div class="pause_game">
          <img src="./images/继续.png" alt="">
        </div>
        <!-- 暂停音乐 -->
        <div class="pause_music">
          <img src="./images/音乐.png" alt="">
        </div>
        <!-- 增大字体 -->
        <div class="maxSize">
          <img src="./images/字体.png" alt="">
        </div>
        <!-- 增大字体 -->
        <div class="minSize">
          <img src="./images/字体-.png" alt="">
        </div>
      </div>
    </div>
    <!-- 敌机 -->
    <div class="enemy">
      <!-- <div class="enemy_item">
        <img src="./images/敌机1.png" alt="">
      </div> -->
    </div>
    <!-- 友机 -->
    <div class="friendly">
      <div class="friendly_item">
        <!-- <img src="./images/友机1.png" alt=""> -->
      </div>
    </div>
    <!-- 小行星 -->
    <div class="aestroid_cont">
      <div class="aestroid_one">
        <div class="aestroid_item">
          <!-- <img src="./images/planets/001-global.png" alt=""> -->
        </div>
      </div>
      <div class="aestroid_two">
        <div class="aestroid_item">
          <!-- <img src="./images/planets/002-travel.png" alt=""> -->
        </div>
      </div>
      <div class="aestroid_three">
        <div class="aestroid_item">
          <!-- <img src="./images/planets/006-mars.png" alt=""> -->
        </div>
      </div>
      <div class="aestroid_four">
        <div class="aestroid_item">
          <!-- <img src="./images/planets/009-saturn.png" alt=""> -->
        </div>
      </div>
      <div class="aestroid_five">
        <div class="aestroid_item">
          <!-- <img src="./images/planets/005-science.png" alt=""> -->
        </div>
      </div>
    </div>
    <!-- 陨石 -->
    <div class="meteorite">
      <div class="meteorite_item">
        <!-- <img src="./images/aestroid_brown.png" alt=""> -->
      </div>
    </div>
    <!-- 燃料 -->
    <div class="fuel_cont">
      <!-- <div class="fuel_item">
        <div class="fuel_top"></div>
        <div class="fuel_center"></div>
      </div> -->
    </div>
    <audio autoplay loop id="background">
      <source src="./sound/background.mp3" type="audio/ogg">
    </audio>
    <audio autoplay id="destroyed">
      <source src="./sound/destroyed.mp3" type="audio/ogg">
    </audio>
    <audio autoplay id="shoot">
      <source src="./sound/shoot.mp3" type="audio/ogg">
    </audio>
  </div>
</body>
<script src="js/script.js"></script>

</html>